<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>账户余额</title>
		<link rel="stylesheet" href="__PUBLIC__/Home/css/common.css">
		<link rel="stylesheet" href="__PUBLIC__/Home/css/main.css">
		<script src="__PUBLIC__/Home/js/zepto.js"></script>
		<script src="__PUBLIC__/Home/js/iscroll-probe.js"></script>
		<style>
			/*下拉加载样式*/
			#wrapper {
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				overflow: hidden;
			}
			#loadBin{color: #5d5d5d;text-align: center;line-height: 30px;}
		</style>
	</head>
	<body>
		<!--正文区域-->
		<div id="accountYueTop" class="top1top2">
			<div class="contain maxWidth">
				<div class="top1">
					<a class="hz back" href="javascript:location.href='/Member';">&#xe600;</a>账户余额
				</div>
				<div class="middle">
					<span class="sanjiaoGray"></span>
					<span class="sanjiaoWhite"></span>
					<p class="title">可用余额<span><em>{$user.jie_money}</em>元</span></p>
					<p class="btns">
						<a href="__URL__/recharge" class="bgbtn orange fl">充值</a>
						<a href="__URL__/withdraw" class="bgbtn fl">提现</a>
					</p>
				</div>
				<div class="top2">
					<ul class="clear">
						<li><a href="__URL__/balance">收入明细</a></li>
						<li class="active"><a href="javascript:;">支出明细</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="accountYueMain" class="fastscroll">
			<div class="contain maxWidth">
				<div id="wrapper" class="maxWidth">
					<div>
						<!--收入明细 支出明细 公用一个ul-->
						<ul class="list ullistlr2line">
						<volist name="list" id="item">
							<li>
								<div class="clear top">
									<p class="left danhao">
										{$item.title}
									</p>
									<p class="right price">
										+&yen;<span>{$item.money}</span>
									</p>
								</div>
								<div class="clear">
									<p class="left">{:date('Y-m-d',$item['addtime'])}</p>
								</div>
							</li>
						</volist>
						</ul>
						<div id="loadBin"></div>
					</div>
				</div>
			</div>
		</div>

		<script>
			//返回按钮
			$('#accountYueTop .back').on('tap',function(){
				window.history.go(-1);
			});

			//iscroll 下拉加载+zeptoajax
			function onload(){
				loadBin = document.getElementById("loadBin");
				myScroll = new IScroll('#wrapper',{
					probeType: 3,
					click:true
				});
				myScroll.on("scroll",scrollFun);
				myScroll.on("scrollEnd",scrollEndFun);
			}

			var page=1;
			var myScroll,
				loadBin,
				isload = false,
				scrollFun = function(){
					if((this.y - this.maxScrollY)>>0 < -50){
						isload = true;
						loadBin.innerHTML = "松开手指加载更多";
						myScroll.refresh();
						myScroll.off("scroll",scrollFun);
					}
				},
				scrollEndFun = function(){
					if(isload){
						isload = false;
						if(currIndex==0){//我的账户余额收入明细
							$.ajax({
								type: 'GET',
								url: 'data/我的账户余额收入明细.html',
								dataType: 'json',
								success: function(data){
									page++;
									for(var i=0;i<data.lists.length;i++){
										$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">'+data.lists[i].title+'</p><p class="right price">+&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p></div></li>');
									}
									loadBin.innerHTML = "";
									myScroll.on("scroll",scrollFun);
									myScroll.refresh();
								},
								error: function(xhr, type){
									console.log('Ajax error!');
								}
							});
						}else if(currIndex==1){//我的账户余额支出明细
							$.ajax({
								type: 'GET',
								url: 'data/我的账户余额支出明细.html',
								dataType: 'json',
								success: function(data){
									page++;
									for(var i=0;i<data.lists.length;i++){
										if(data.lists[i].type=='dingdan'){
											$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">订单号'+data.lists[i].dingdanNum+'</p><p class="right price">-&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p><p class="right">'+data.lists[i].dingdanState+'</p></div></li>');
										}else if(data.lists[i].type=='tixian'){
											$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">'+data.lists[i].title+'</p><p class="right price">-&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p><p class="right">'+data.lists[i].state+'</p></div></li>');
										}
									}
									loadBin.innerHTML = "";
									myScroll.on("scroll",scrollFun);
									myScroll.refresh();
								},
								error: function(xhr, type){
									console.log('Ajax error!');
								}
							});
						}
					}
				};


			//点击 导航的li
			var currIndex=0;//默认是在第一个tab上
			$('#accountYueTop .top2 li').on('tap',function(){
				currIndex=$(this).index();
				$(this).addClass('active').siblings().removeClass('active');

				$('#wrapper .list').html('');//清空内容

				//切换tab的时候，让滚动条在顶部
				myScroll._translate(0,0);//查看源码，里面提供方法

				page=1;
				if(currIndex==0){//我的账户余额收入明细
					$.ajax({
						type: 'GET',
						url: 'data/我的账户余额收入明细.html',
						dataType: 'json',
						success: function(data){
							page++;
							for(var i=0;i<data.lists.length;i++){
								$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">'+data.lists[i].title+'</p><p class="right price">+&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p></div></li>');
							}
							myScroll.refresh();
						},
						error: function(xhr, type){
							console.log('Ajax error!');
						}
					});
				}else if(currIndex==1){//我的账户余额支出明细
					$.ajax({
						type: 'GET',
						url: 'data/我的账户余额支出明细.html',
						dataType: 'json',
						success: function(data){
							page++;
							for(var i=0;i<data.lists.length;i++){
								if(data.lists[i].type=='dingdan'){
									$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">订单号'+data.lists[i].dingdanNum+'</p><p class="right price">-&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p><p class="right">'+data.lists[i].dingdanState+'</p></div></li>');
								}else if(data.lists[i].type=='tixian'){
									$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">'+data.lists[i].title+'</p><p class="right price">-&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p><p class="right">'+data.lists[i].state+'</p></div></li>');
								}
							}
							myScroll.refresh();
						},
						error: function(xhr, type){
							console.log('Ajax error!');
						}
					});
				}
			});
		</script>
	</body>
</html>